import 'package:flutter_vant/component/loading.dart';
import 'package:flutter_vant/main.dart';
import 'package:flutter/material.dart';
import 'package:simulator/components/DemoView/index.dart';
import 'package:simulator/pages/button/style.dart';

class ButtonView extends HookWidget {
  const ButtonView({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    // 按钮类型
    renderButtonType() {
      const List<Map> data = [
        {"name": '主要按钮', "type": "primary"},
        {"name": '成功按钮', "type": "success"},
        {"name": '默认按钮', "type": "normal"},
        {"name": '危险按钮', "type": "danger"},
        {"name": '警告按钮', "type": "warning"}
      ];
      return DemoView(
          title: '按钮类型',
          children: data.map((e) {
            return VanButton(
              text: e['name'],
              type: e['type'],
              styles: [FL_FSize(size: 50)],
            );
          }).toList());
    }

    Widget renderplain() {
      const List<Map> data = [
        {"name": '朴素按钮', "type": "primary"},
        {"name": '朴素按钮', "type": "info"},
      ];
      return DemoView(
          title: '朴素按钮',
          children: data.map((e) {
            return VanButton(
              text: e['name'],
              type: e['type'],
              plain: true,
            );
          }).toList());
    }

    Widget renderHairline() {
      const List<Map> data = [
        {"name": '细边框', "type": "primary"},
        {"name": '细边框', "type": "info"},
      ];
      return DemoView(
          title: '细边框',
          children: data.map((e) {
            return VanButton(
              text: e['name'],
              type: e['type'],
              plain: true,
              hairline: true,
            );
          }).toList());
    }

    Widget renderDisabled() {
      const List<Map> data = [
        {"name": '细边框', "type": "primary"},
        {"name": '细边框', "type": "info"},
      ];
      return DemoView(
          title: '禁用状态',
          children: data.map((e) {
            return VanButton(
              text: e['name'],
              type: e['type'],
              plain: true,
              hairline: true,
              disabled: true,
            );
          }).toList());
    }

    Widget renderLoading() {
      final data = [
        {"name": '', "type": "primary", 'loadingType': VanLoadingType.circular},
        {"name": '', "type": "info", 'loadingType': VanLoadingType.spinner},
        {"name": '', "type": "info", "text": '加载中', 'width': (360 - 40) * 0.35},
      ];
      return DemoView(
          title: '加载状态',
          children: data.map((e) {
            Map item = e;
            return VanButton(
              text: item['name'],
              type: item['type'],
              loading: true,
              loadingType: item['loadingType'],
              loadingText: item['text'] ?? '',
            );
          }).toList());
    }

    Widget renderSquare() {
      const data = [
        {"name": '方形按钮', "type": "primary", "square": true},
        {"name": '圆形按钮', "type": "info", "round": true},
      ];
      return DemoView(
          title: '按钮形状',
          children: data.map((e) {
            Map<String, dynamic> item = e;
            return VanButton(
              text: item['name'],
              type: item['type'],
              square: item['square'] ?? false,
              round: item['round'] ?? false,
            );
          }).toList());
    }

    Widget renderSize() {
      const data = [
        {"name": '大号按钮', "type": "primary", "size": 'large'},
        {"name": '普通按钮', "type": "primary", "size": "normal"},
        {"name": '小型', "type": "primary", "size": "small"},
        {"name": '迷你', "type": "primary", "size": "mini"},
      ];
      return DemoView(title: '按钮尺寸', isGrid: false, children: [
        Frame(
            styles: IButtonStyle.grid,
            children: data.map((e) {
              Map<String, dynamic> item = e;
              return VanButton(
                text: item['name'],
                type: item['type'],
                size: item['size'],
                styles: const {
                  CssRule.fontSize: 12,
                  // CssRule.marginRight: 20,
                  // CssRule.marginBottom: 20
                },
              );
            }).toList())
      ]);
    }

    Widget renderBlock() {
      const data = [
        {"name": '块级元素', "type": "primary", "size": 'large'},
      ];
      return DemoView(
          title: '块级元素',
          isGrid: false,
          children: data.map((e) {
            Map<String, dynamic> item = e;
            return VanButton(
              text: item['name'],
              type: item['type'],
              block: true,
            );
          }).toList());
    }

    Widget renderColor() {
      const data = [
        {"name": '单色按钮', "type": "primary", "color": 'rgb(114, 50, 221)'},
        {
          "name": '单色按钮',
          "type": "primary",
          "plain": true,
          "color": 'rgb(114, 50, 221)'
        },
      ];
      return DemoView(
          title: '自定义颜色',
          children: data.map((e) {
            Map<String, dynamic> item = e;
            return VanButton(
              text: item['name'],
              type: item['type'],
              color: item['color'],
              plain: item['plain'] ?? false,
            );
          }).toList());
    }

    return HookView(
      children: [
        // 按钮类型
        renderButtonType(),
        // 朴素按钮
        renderplain(),
        // 细边框
        renderHairline(),
        // 禁用状态
        renderDisabled(),
        // 加载状态
        renderLoading(),
        // 按钮形状
        renderSquare(),
        // 按钮尺寸
        renderSize(),
        // 块级元素
        renderBlock(),
        // 自定义颜色
        renderColor()
      ],
      title: 'Button',
    );
  }
}
